@charset "utf-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
	font-family: 'Khand', sans-serif;
	font-family: 'ZCOOL QingKe HuangYou', sans-serif;
	box-sizing: border-box;
	transition: all .2s linear;
	text-decoration: none;
	list-style: none;
	scroll-behavior: smooth;
}

body{
	background: #080808;
	color: #fff;
	min-height: 100vh;
	overflow-x: hidden;
}

#header{
	height: 100vh;
	width: 100%;
	background-image:url("gallery/3054cf25e64e2e0b51b9400f73fb8bc6.jpeg");
	background-size: cover;
	background-position: center;
}

.container{
	padding: 20px 10%;
	
}

.logo{
	width: 140px;
}

nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}




nav ul li{
	display: inline-block;
	list-style: none;
	margin: 10px 30px;
}

nav ul li a{
	color: #fff;
	text-decoration: none;
	font-size: 21px;
	position: relative;
}

nav ul li a::after{
	content: '';
	width: 0;
	height: 5px;
	background: #ff004f;
	position: absolute;
	left: 0;
	bottom: -6px;
	transition: 0.5s;
}

nav ul li a:hover::after{
	width: 100%;
	
}

.header-text{
	margin-top: 10%;
	font-size: 40px;
}

.header-text p{
	font-size: 200px;
	margin-top: 20px;
	text-decoration:underline #ff004f;
}

.header-text h1{
	color: #D29250;
}

.header-text h1 span{
	color: white;
}


/*------------about------------*/

#about{
	padding: 80px 0px;
	color:white;
}

.row{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


.about-column-1{
	flex-basis: 60%;
	
}

.about-column-1 p span{
	font-size: 50px;
	
}

.sub-title-1{
	font-weight: 600;
	font-size: 60px;
	color: white;
}

.about-column-1 p{
	font-size: 30px;
}

.sub-title-2{
	font-weight: 300;
	font-size: 30px;
	color:#D29250;
}



.about-column-2{
	flex-basis: 35%;
}

.about-column-2 img{
	width: 100%;
	border-radius: 20px;
}

.container-2{
	width: 100%;
	height: 100vh;
    background: linear-gradient(to right, #252525, darkgoldenrod, #252525);




	display: flex;
	align-items: center;
	justify-content: center;
}


.card{
	display: flex;
	align-items: center;
	justify-content: center;
}

.image{
	
	width: 100px;
	height: 500px;
	margin: 10px;
	border-radius: 50px;
	background-size: cover;
	background-position: center;
	display: flex;
	position: relative;
	justify-content: center;
	align-items: flex-end;
	overflow: hidden;
	transition: 0.5s;
	
}


.image:nth-child(1){
	background-image:url("gallery/zainayujianni dalian.jpeg");
	
}
.image:nth-child(2){
	background-image:url("gallery/2018 changsha.jpeg");
	
}

.image:nth-child(3){
	background-image:url("gallery/2018shanghai.jpeg");
	
}

.image:nth-child(4){
	background-image:url("gallery/2019penang.jpeg");
	
}

.image:nth-child(5){
	background-image:url("gallery/2020music festival.jpg")
	
}

.image:nth-child(6){
	background-image:url("gallery/guangzhou2021.jpeg");
	
}

.image:nth-child(7){
	background-image:url("gallery/2023 hengyang.png");
	
}

.image:nth-child(8){
	background-image:url("gallery/2023foshang.png");
	
}


.image:nth-child(9){
	background-image:url("gallery/2023nanning.jpg");
	
}
.image:hover{
	width: 300px;
	cursor: pointer;
	
}

.image:hover .about{
	transform: translateX(0);
	opacity: 1;
}


.image .about{
	color: white;
	position: absolute;
	align-items: end;
	width: 300px;
	height: 45%;
	padding: 0 20px;
	transform: translateX(100%);
	opacity: 0;
	transition: 0.5s;
}

.image:hover .about{
	transform: translateX(0);
	opacity: 1;
}

.about h3{
	font-size: 30px;
}


.Album{
	 background: linear-gradient(to right, #252525, darkgoldenrod, #252525);
}

.Album h1{
	font-size: 45px;
}

.album{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
}

.album a{
	height: 300px;
	width: 300px;
	margin: 20px;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 3px 5px black;
}

.album a img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	
}

.album a img:hover{
	transform: scale(1.2);
}

#Biography{
	padding: 80px 0;
	color: black;
	background: linear-gradient(to right, #252525, darkgoldenrod, #252525);
	
}

.row-2 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}

.bio1{
	flex-basis: 35%;
	
}

.bio1 img{
	width: 100%;
	border-radius: 20px;
	padding-right: 50px;
	margin-left: 100px;
	
}

.bio2{
	flex-basis: 55%;
}

.bio2 h1{
	color: #252525;
	font-size: 50px;
}


.bio2 section h3{
	font-size: 30px;
}
.bio2 section{
	font-size: 25px;
	color: white;
}

.row3 {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	
}

.bio3{
	flex-basis: 55%;
	padding-left: 100px;
}
.bio4 img{
	width: 100%;
	border-radius: 0 20px;
	padding:100px 100px;
	
}
.bio4{
	flex-basis: 40%;
}

.bioxue2{
	padding-top: 40px;
}

.bio3 h4{
	font-size: 30px;
	color: white;
}

.bio3 ul {
	font-size: 25px;
	color: white;
}

.footercontainer{
	width: 100%;
	padding: 50px 30px 20px;
	
}

.socialicons{
	display: flex;
	justify-content: center;
}

.socialicons a{
	text-decoration: none;
	padding: 10px;
	background-color: white;
	margin: 10px;
	border-radius: 50%;
	
}
.socialicons a i{
	font-size: 2em;
	color: black;
	opacity: 0.9;
	
}

.socialicons a:hover{
	background-color: #111;
	transition: 0.5s;
	
}

.socialicons a:hover i{
	color: white;
	transition: 0.5s;
	
}

.footerNav{
	margin: 30px 0;
	
}

.footerNav ul{
	display: flex;
	justify-content: center;
}
.footerNav ul li a {
	color: white;
	margin: 20px;
	text-decoration: none;
	font-size: 1.3em;
	opacity: 0.7;
	transition: 0.5s;
	
}
.footerNav ul li a:hover{
	opacity:1;
	
}

.footerbottom{
	color: white;
	text-align: center;
	padding: 20px;
}


/* Mobile */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px; /* Adjust as needed */
    }

    #header {
        height: 50vh; /* Adjust as needed */
    }

    .container {
        padding: 15px 6%; /* Adjust as needed */
    }

    .logo {
        width: 100px; /* Adjust as needed */
    }

    nav ul li {
        margin: 10px 15px; /* Adjust as needed */
    }

    .header-text {
        margin-top: 5%; /* Adjust as needed */
        font-size: 15px; /* Adjust as needed */
    }

    .header-text p {
        font-size: 60px; /* Adjust as needed */
        margin-top: 10px; /* Adjust as needed */
    }

    #about {
        padding: 40px 0; /* Adjust as needed */
    }

    .about-column-1 p span {
        font-size: 25px; /* Adjust as needed */
    }

    .sub-title-1 {
        font-size: 40px; /* Adjust as needed */
    }

    .about-column-1 p {
        font-size: 12px; /* Adjust as needed */
    }

    .sub-title-2 {
        font-size: 16px; /* Adjust as needed */
    }

    .about-column-2 img {
        border-radius: 20px; /* Adjust as needed */
    }

    .container-2 {
        height: auto;
    }

    .image {
        width: 40px; /* Adjust as needed */
        height: 300px; /* Adjust as needed */
    }

    .image:hover {
        width: 200px; /* Adjust as needed */
    }

    .image .about {
        width: 200px; /* Adjust as needed */
    }

    .Album h1 {
        font-size: 30px; /* Adjust as needed */
		margin-left: 30px;
    }

    .album a {
        height: 200px; /* Adjust as needed */
        width: 200px; /* Adjust as needed */
    }

    #Biography {
        padding: 50px 0; /* Adjust as needed */
    }

    .bio1 img {
   
        margin-left: 30px; /* Adjust as needed */
		position:inherit;
    }

    .bio2 h1 {
        font-size: 30px; /* Adjust as needed */
		margin-top: 190px;
		margin-left: 35px;
    }

    .bio2 section h3 {
        font-size: 20px; /* Adjust as needed */
		
    }

    .bio2 section {
        font-size: 15px; /* Adjust as needed */
		margin-left: 35px;

    }
	
	 .row-2 {
        flex-direction: column;
    }

    .row3 {
        flex-direction: column;
    }

    .bio3 {
        padding-left: 35px;
      
    }
	
	.bio3 h4{
		font-size: 20px;
		margin-left: 0px;
	}
	
	.bio3 ul{
		font-size: 15px;
	}

    .bio4 img {
        padding: 50px; /* Adjust as needed */
    }
}


@media only screen and (max-width: 500px) {
    body {
        font-size: 14px; /* Adjust as needed */
    }

    #header {
        height: 50vh; /* Adjust as needed */
    }

    .container {
        padding: 15px 6%; /* Adjust as needed */
    }

    .logo {
        width: 100px; /* Adjust as needed */
    }

    nav ul li {
        margin: 10px 10px; /* Adjust as needed */
    }

    .header-text {
        margin-top: 4%; /* Adjust as needed */
        font-size: 14px; /* Adjust as needed */
    }

    .header-text p {
        font-size: 60px; /* Adjust as needed */
        margin-top: 10px; /* Adjust as needed */
    }

    #about {
        padding: 40px 0; /* Adjust as needed */
    }

    .about-column-1 p span {
        font-size: 20px; /* Adjust as needed */
    }

    .sub-title-1 {
        font-size: 35px; /* Adjust as needed */
    }

    .about-column-1 p {
        font-size: 10.5px; /* Adjust as needed */
    }

    .sub-title-2 {
        font-size: 14px; /* Adjust as needed */
    }

    .about-column-2 img {
        border-radius: 20px; /* Adjust as needed */
    }

    .container-2 {
        height: auto;
    }

    .image {
        width: 30px; /* Adjust as needed */
        height: 250px; /* Adjust as needed */
    }

    .image:hover {
        width: 150px; /* Adjust as needed */
    }

    .image .about {
        width: 150px; /* Adjust as needed */
    }

    .Album h1 {
        font-size: 30px; /* Adjust as needed */
		margin-left: 30px;
    }

    .album a {
        height: 150px; /* Adjust as needed */
        width: 150px; /* Adjust as needed */
    }

    #Biography {
        padding: 40px 0; /* Adjust as needed */
    }

    .bio1 img {
        margin-left: 30px; /* Adjust as needed */
		position:inherit;
    }

    .bio2 h1 {
        font-size: 30px; /* Adjust as needed */
		margin-top: 50px;
		margin-left: 35px;
    }

    .bio2 section h3 {
        font-size: 20px; /* Adjust as needed */
		
    }

    .bio2 section {
        font-size: 15px; /* Adjust as needed */
		margin-left: 35px;

    }
	
	 .row-2 {
        flex-direction: column;
    }

    .row3 {
        flex-direction: column;
    }

    .bio3 {
        padding-left: 35px;
      
    }
	
	.bio3 h4{
		font-size: 20px;
		margin-left: 0px;
	}
	
	.bio3 ul{
		font-size: 15px;
	}

    .bio4 img {
        padding: 50px; /* Adjust as needed */
    }
}

@media only screen and (max-width: 415px) {
    body {
        font-size: 12px; /* Adjust as needed */
    }

    #header {
        height: 50vh; /* Adjust as needed */
    }

    .container {
        padding: 15px 5%; /* Adjust as needed */
    }

    .logo {
        width: 100px; /* Adjust as needed */
    }

    nav ul li {
        margin: 10px 10px; /* Adjust as needed */
    }

    .header-text {
        margin-top: 4%; /* Adjust as needed */
        font-size: 12px; /* Adjust as needed */
    }

    .header-text p {
        font-size: 60px; /* Adjust as needed */
        margin-top: 10px; /* Adjust as needed */
    }

    #about {
        padding: 40px 0; /* Adjust as needed */
    }

    .about-column-1 p span {
        font-size: 20px; /* Adjust as needed */
    }

    .sub-title-1 {
        font-size: 35px; /* Adjust as needed */
    }

    .about-column-1 p {
        font-size: 10.5px; /* Adjust as needed */
    }

    .sub-title-2 {
        font-size: 14px; /* Adjust as needed */
    }

    .about-column-2 img {
        border-radius: 20px; /* Adjust as needed */
    }

    .container-2 {
        height: auto;
    }

    .image {
        width: 30px; /* Adjust as needed */
        height: 250px; /* Adjust as needed */
    }

    .image:hover {
        width: 150px; /* Adjust as needed */
    }

    .image .about {
        width: 150px; /* Adjust as needed */
    }

    .Album h1 {
        font-size: 30px; /* Adjust as needed */
		margin-left: 30px;
    }

    .album a {
        height: 150px; /* Adjust as needed */
        width: 150px; /* Adjust as needed */
    }

    #Biography {
        padding: 40px 0; /* Adjust as needed */
    }

    .bio1 img {
        margin-left: 30px; /* Adjust as needed */
		position:inherit;
    }

    .bio2 h1 {
        font-size: 30px; /* Adjust as needed */
		margin-top: 50px;
		margin-left: 35px;
    }

    .bio2 section h3 {
        font-size: 20px; /* Adjust as needed */
		
    }

    .bio2 section {
        font-size: 15px; /* Adjust as needed */
		margin-left: 35px;

    }
	
	 .row-2 {
        flex-direction: column;
    }

    .row3 {
        flex-direction: column;
    }

    .bio3 {
        padding-left: 35px;
      
    }
	
	.bio3 h4{
		font-size: 20px;
		margin-left: 0px;
	}
	
	.bio3 ul{
		font-size: 15px;
	}

    .bio4 img {
        padding: 50px; /* Adjust as needed */
    }

}
	@media only screen and (max-width: 350px) {
    body {
        font-size: 10px; /* Adjust as needed */
    }

    #header {
        height: 50vh; /* Adjust as needed */
    }

    .container {
        padding: 15px 5%; /* Adjust as needed */
    }

    .logo {
        width: 100px; /* Adjust as needed */
    }

    nav ul li {
        margin: 8px 8px; /* Adjust as needed */
    }

    .header-text {
        margin-top: 4%; /* Adjust as needed */
        font-size: 10px; /* Adjust as needed */
    }

    .header-text p {
        font-size: 60px; /* Adjust as needed */
        margin-top: 10px; /* Adjust as needed */
    }

    #about {
        padding: 40px 0; /* Adjust as needed */
    }

    .about-column-1 p span {
        font-size: 20px; /* Adjust as needed */
    }

    .sub-title-1 {
        font-size: 35px; /* Adjust as needed */
    }

    .about-column-1 p {
        font-size: 10.5px; /* Adjust as needed */
    }

    .sub-title-2 {
        font-size: 14px; /* Adjust as needed */
    }

    .about-column-2 img {
        border-radius: 20px; /* Adjust as needed */
    }

    .container-2 {
        height: auto;
    }

    .image {
        width: 30px; /* Adjust as needed */
        height: 250px; /* Adjust as needed */
    }

    .image:hover {
        width: 150px; /* Adjust as needed */
    }

    .image .about {
        width: 150px; /* Adjust as needed */
    }

    .Album h1 {
        font-size: 30px; /* Adjust as needed */
		margin-left: 30px;
    }

    .album a {
        height: 150px; /* Adjust as needed */
        width: 150px; /* Adjust as needed */
    }

    #Biography {
        padding: 40px 0; /* Adjust as needed */
    }

    .bio1 img {
        margin-left: 30px; /* Adjust as needed */
		position:inherit;
    }

    .bio2 h1 {
        font-size: 30px; /* Adjust as needed */
		margin-top: 50px;
		margin-left: 35px;
    }

    .bio2 section h3 {
        font-size: 20px; /* Adjust as needed */
		
    }

    .bio2 section {
        font-size: 15px; /* Adjust as needed */
		margin-left: 35px;

    }
	
	 .row-2 {
        flex-direction: column;
    }

    .row3 {
        flex-direction: column;
    }

    .bio3 {
        padding-left: 35px;
      
    }
	
	.bio3 h4{
		font-size: 20px;
		margin-left: 0px;
	}
	
	.bio3 ul{
		font-size: 15px;
	}

    .bio4 img {
        padding: 50px; /* Adjust as needed */
    }

}